<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>注册界面</el-header>
        <el-main>
            <span>账号:</span>
            <el-input
                    placeholder="请输入账号"
                    :disabled="false"
                    style="width: 500px;height: auto"
                    prefix-icon="el-icon-upload"
                    v-model="message.username">
            </el-input><p></p>
            <span>密码:</span>
            <el-input
                    placeholder="请输入密码"
                    :disabled="false"
                    style="width: 500px;height: auto"
                    prefix-icon="el-icon-upload"
                    v-model="message.pwd">
            </el-input><p></p>
            <span>再次输入密码:</span>
            <el-input
                    placeholder="请确认密码"
                    :disabled="false"
                    style="width: 500px;height: auto;margin-right: 70px;"
                    prefix-icon="el-icon-upload"
                    v-model="message.repwd">
            </el-input><p></p>
            <span>电话:</span>
            <el-input
                    placeholder="请输入电话"
                    :disabled="false"
                    style="width: 500px;height: auto"
                    prefix-icon="el-icon-upload"
                    v-model="message.phone">
            </el-input><p></p>
            <span>邮箱:</span>
            <el-input
                    placeholder="请输入邮箱"
                    :disabled="false"
                    style="width: 500px;height: auto"
                    prefix-icon="el-icon-upload"
                    v-model="message.email">
            </el-input><p></p>

            <el-button @click="register">注册</el-button>
        </el-main>
    </el-container>
</div>
<style>

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
</body>
<script>
    new Vue({
        el: '#app',
        data :{
          message:{username:"aaa", pwd:"123", repwd:"123",phone:"123",email:"321@qq.com"},
        },
        methods:{
            register(){
                let p = new URLSearchParams();
                p.append("username",this.message.username);
                p.append("pwd",this.message.pwd);
                p.append("repwd",this.message.repwd);
                p.append("phone",this.message.phone);
                p.append("email",this.message.email);

                axios.post("register",p).then(res=>{
                    if(res.data.code == 1){
                        this.$message(res.data.msg);
                    }else{
                        this.$alert(res.data.msg);
                    }
                })
            }
        }
    })


</script>
</html>